<template>
  <div class="config-wx" v-loading="loading">
    <el-form label-position="top" :model="formData" ref="formRef">
      <div class="wx-title">底部菜单按钮配置</div>

      <el-form-item label="菜单按钮1激活图片" :rules="[
        { required: true, message: '上传菜单按钮1激活图片', trigger: 'change' },
      ]">
        <div class="img-box" v-for="(item, i) in menu1OnList" :key="i">
          <img :src="item.url" alt="" />

          <div class="occlusion">
            <el-icon class="del" @click="handleRemove(1, i)">
              <IEpDelete />
            </el-icon>
          </div>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false"
          :file-list="menu1OnList" :on-change="onChange(1)">
          <el-icon>
            <IEpPlus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="菜单按钮1非激活图片" :rules="[
        { required: true, message: '上传菜单按钮1非激活图片', trigger: 'change' },
      ]">
        <div class="img-box" v-for="(item, i) in menu1OffList" :key="i">
          <img :src="item.url" alt="" />

          <div class="occlusion">
            <el-icon class="del" @click="handleRemove(2, i)">
              <IEpDelete />
            </el-icon>
          </div>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false"
          :file-list="menu1OffList" :on-change="onChange(2)">
          <el-icon>
            <IEpPlus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="菜单按钮2激活图片" :rules="[
        { required: true, message: '上传菜单按钮2激活图片', trigger: 'change' },
      ]">
        <div class="img-box" v-for="(item, i) in menu2OnList" :key="i">
          <img :src="item.url" alt="" />

          <div class="occlusion">
            <el-icon class="del" @click="handleRemove(3, i)">
              <IEpDelete />
            </el-icon>
          </div>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false"
          :file-list="menu2OnList" :on-change="onChange(3)">
          <el-icon>
            <IEpPlus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="菜单按钮2非激活图片" :rules="[
        { required: true, message: '上传菜单按钮2非激活图片', trigger: 'change' },
      ]">
        <div class="img-box" v-for="(item, i) in menu2OffList" :key="i">
          <img :src="item.url" alt="" />

          <div class="occlusion">
            <el-icon class="del" @click="handleRemove(4, i)">
              <IEpDelete />
            </el-icon>
          </div>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false"
          :file-list="menu2OffList" :on-change="onChange(4)">
          <el-icon>
            <IEpPlus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="菜单按钮3激活图片" :rules="[
        { required: true, message: '上传菜单按钮3激活图片', trigger: 'change' },
      ]">
        <div class="img-box" v-for="(item, i) in menu3OnList" :key="i">
          <img :src="item.url" alt="" />

          <div class="occlusion">
            <el-icon class="del" @click="handleRemove(5, i)">
              <IEpDelete />
            </el-icon>
          </div>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false"
          :file-list="menu3OnList" :on-change="onChange(5)">
          <el-icon>
            <IEpPlus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="菜单按钮3非激活图片" :rules="[
        { required: true, message: '上传菜单按钮3非激活图片', trigger: 'change' },
      ]">
        <div class="img-box" v-for="(item, i) in menu3OffList" :key="i">
          <img :src="item.url" alt="" />

          <div class="occlusion">
            <el-icon class="del" @click="handleRemove(6, i)">
              <IEpDelete />
            </el-icon>
          </div>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false"
          :file-list="menu3OffList" :on-change="onChange(6)">
          <el-icon>
            <IEpPlus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="菜单按钮4激活图片" :rules="[
        { required: true, message: '上传菜单按钮4激活图片', trigger: 'change' },
      ]">
        <div class="img-box" v-for="(item, i) in menu4OnList" :key="i">
          <img :src="item.url" alt="" />

          <div class="occlusion">
            <el-icon class="del" @click="handleRemove(7, i)">
              <IEpDelete />
            </el-icon>
          </div>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false"
          :file-list="menu4OnList" :on-change="onChange(7)">
          <el-icon>
            <IEpPlus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="菜单按钮4非激活图片" :rules="[
        { required: true, message: '上传菜单按钮4非激活图片', trigger: 'change' },
      ]">
        <div class="img-box" v-for="(item, i) in menu4OffList" :key="i">
          <img :src="item.url" alt="" />

          <div class="occlusion">
            <el-icon class="del" @click="handleRemove(8, i)">
              <IEpDelete />
            </el-icon>
          </div>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false"
          :file-list="menu4OffList" :on-change="onChange(8)">
          <el-icon>
            <IEpPlus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { uploadImgApi } from "@/plugins/api/upload";
import { configAddApi } from "@/plugins/api/system/config";
import { configApi } from "@/plugins/api/login";
import { useCounterStore } from "@/stores/counter.js";
const store = useCounterStore();

let formData = ref({});
let formRef = ref(null);

let menu1OnList = ref([]);
let menu1OnLogo = ref("");

let menu1OffLogo = ref("");
let menu1OffList = ref([]);
let loading = ref(false);

let menu2OnList = ref([]);

let menu2OffList = ref([]);


let menu3OnList = ref([]);


let menu3OffList = ref([]);


let menu4OnList = ref([]);

let menu4OffList = ref([]);

const onChange = (type) => {
  return (file, fileList) => {
    // 在这里，你可以通过 type 来区分是哪个上传器触发了事件
    console.log(`Uploader ${type} file changed`, file, fileList);
    // 执行其他逻辑...  
    let formData = new FormData();
    formData.append("file", file.raw);
    loading.value = true;
    uploadImgApi(formData)
      .then((data) => {
        let obj = {
          url: import.meta.env.VITE_APP_BASE_API + data.file_url,
        };
        switch (type) {
          case 1:
            menu1OnLogo.value = data.file_url;
            if (menu1OnList.value.length > 0) {
              menu1OnList.value = [];
              menu1OnList.value.push(obj);
            } else {
              menu1OnList.value.push(obj);
            }

            break;

          case 2:
            menu1OffLogo.value = data.file_url;
            if (menu1OffList.value.length > 0) {
              menu1OffList.value = [];
              menu1OffList.value.push(obj);
            } else {
              menu1OffList.value.push(obj);
            }
            break;

          case 3:
            if (menu2OnList.value.length > 0) {
              menu2OnList.value = [];
              menu2OnList.value.push(obj);
            } else {
              menu2OnList.value.push(obj);
            }
            break;
          case 4:
            if (menu2OffList.value.length > 0) {
              menu2OffList.value = [];
              menu2OffList.value.push(obj);
            } else {
              menu2OffList.value.push(obj);
            }
            break;
          case 5:
            if (menu3OnList.value.length > 0) {
              menu3OnList.value = [];
              menu3OnList.value.push(obj);
            } else {
              menu3OnList.value.push(obj);
            }
            break;
          case 6:
            if (menu3OffList.value.length > 0) {
              menu3OffList.value = [];
              menu3OffList.value.push(obj);
            } else {
              menu3OffList.value.push(obj);
            }
            break;
          case 7:
            if (menu4OnList.value.length > 0) {
              menu4OnList.value = [];
              menu4OnList.value.push(obj);
            } else {
              menu4OnList.value.push(obj);
            }
            break;
          case 8:
            if (menu4OffList.value.length > 0) {
              menu4OffList.value = [];
              menu4OffList.value.push(obj);
            } else {
              menu4OffList.value.push(obj);
            }
            break;
          default:
            loading.value = false;
            break;
        }
        loading.value = false;
        //
      })
      .catch(() => {
        loading.value = false;
      });
  };
}
// 删除
const handleRemove = (type, index) => {
  switch (type) {
    case 1:
      menu1OnList.value.splice(index, 1);
      menu1OnLogo.value = null;
      break;

    case 2:
      menu1OffList.value.splice(index, 1);
      menu1OffLogo.value = null;
      break;
    case 3:
      menu2OnList.value.splice(index, 1);
      break;
    case 4:
      menu2OffList.value.splice(index, 1);
      break;
    case 5:
      menu3OnList.value.splice(index, 1);
      break;
    case 6:
      menu3OffList.value.splice(index, 1);
      break;
    case 7:
      menu4OnList.value.splice(index, 1);
      break;
    case 8:
      menu4OffList.value.splice(index, 1);
      break;
    default:
      break;
  }
}

const submit = () => {
  if (!formRef.value) return;
  formRef.value.validate((valid, fields) => {
    const menu2_on = menu2OffList.value && menu2OnList.value.length ? menu2OnList.value[0].url.replace(import.meta.env.VITE_APP_BASE_API, '') : null
    const menu2_off = menu2OnList.value && menu2OffList.value.length ? menu2OffList.value[0].url.replace(import.meta.env.VITE_APP_BASE_API, '') : null
    const menu3_on = menu3OnList.value && menu3OnList.value.length ? menu3OnList.value[0].url.replace(import.meta.env.VITE_APP_BASE_API, '') : null
    const menu3_off = menu3OffList.value && menu3OffList.value.length ? menu3OffList.value[0].url.replace(import.meta.env.VITE_APP_BASE_API, '') : null
    const menu4_on = menu4OnList.value && menu4OnList.value.length ? menu4OnList.value[0].url.replace(import.meta.env.VITE_APP_BASE_API, '') : null
    const menu4_off = menu4OffList.value && menu4OffList.value.length ? menu4OffList.value[0].url.replace(import.meta.env.VITE_APP_BASE_API, '') : null
    if (valid) {
      let arr = [
        {
          conf_name: "wechat.menu1_on",
          conf_value: menu1OnLogo.value,
        },
        {
          conf_name: "wechat.menu1_off",
          conf_value: menu1OffLogo.value,
        },
        {
          conf_name: "wechat.menu2_on",
          conf_value: menu2_on,
        },
        {
          conf_name: "wechat.menu2_off",
          conf_value: menu2_off,
        },
        {
          conf_name: "wechat.menu3_on",
          conf_value: menu3_on,
        },
        {
          conf_name: "wechat.menu3_off",
          conf_value: menu3_off,
        },
        {
          conf_name: "wechat.menu4_on",
          conf_value: menu4_on,
        },
        {
          conf_name: "wechat.menu4_off",
          conf_value: menu4_off,
        }
      ];

      loading.value = true;
      configAddApi(arr)
        .then(() => {
          ElMessage.success("提交成功！");
          getConfigApi();
          loading.value = false;
        })
        .catch(() => {
          loading.value = false;
        });
    }
  });
}
let info = ref({});
const getConfigApi = () => {
  configApi({
    conf_name: "wechat",
  }).then((data) => {
    info.value = Object.assign({}, data.wechat);
    if (data.wechat.menu1_on) {
      menu1OnLogo.value = data.wechat.menu1_on;
      menu1OnList.value = [];
      menu1OnList.value.push({
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.menu1_on,
      });
    }
    if (data.wechat.menu1_off) {
      menu1OffLogo.value = data.wechat.menu1_off;
      menu1OffList.value = [];
      menu1OffList.value.push({
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.menu1_off,
      });
    }
    if (data?.wechat?.menu2_on) {
      menu2OnList.value = [];
      menu2OnList.value.push({
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.menu2_on,
      });
    }
    if (data?.wechat?.menu2_off) {
      menu2OffList.value = [];
      menu2OffList.value.push({
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.menu2_off,
      });
    }
    if (data?.wechat?.menu3_on) {
      menu3OnList.value = [];
      menu3OnList.value.push({
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.menu3_on,
      });
    }
    if (data?.wechat?.menu3_off) {
      menu3OffList.value = [];
      menu3OffList.value.push({
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.menu3_off,
      });
    }
    if (data?.wechat?.menu4_on) {
      menu4OnList.value = [];
      menu4OnList.value.push({
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.menu4_on,
      });
    }
    if (data?.wechat?.menu4_off) {
      menu4OffList.value = [];
      menu4OffList.value.push({
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.menu4_off,
      });
    }

  });
}
onMounted(() => {
  getConfigApi();
});
</script>
<style lang="scss" scoped>
.config-wx {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;

  .wx-title {
    font-size: 18px;
    font-weight: 700;
    margin: 10px 0;
  }

  .img-box {
    display: inline-block;
    margin-right: 5px;
    // margin-bottom: 10px;
    width: 148px;
    position: relative;

    img {
      width: 100%;
      height: 140px;
      object-fit: cover;
    }

    .occlusion {
      display: none;
      width: 100%;
      height: 140px;
      background: #9e9c9c75;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
      text-align: center;

      .del {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 148px;
        color: #464444;
        cursor: pointer;
        font-size: large;

        &:hover {
          color: rgb(130, 131, 133);
        }
      }
    }

    &:hover {
      .occlusion {
        display: block;
      }
    }
  }
}
</style>
